<template>
  <div id="app">
    <nav class="appConter">
      <div class="left">
        <img class="logo1" v-if="1" src="../src/assets/img/logo.png" alt="">
        <img class="logo1" v-else="2" src="../src/assets/img/logo2.png" alt="">
        <router-link to="/makehome">视频制作</router-link>
        <router-link to="/broadcastcenter">直播中心</router-link>
        <a class="helpCenter">帮助中心</a>
      </div>

      <!-- 图片 -->
      <div class="right">
        <div class="img">
          <img src="../src/assets/img/szr01.png" alt="">
        </div>

        <div class="vip">
          <span>vip</span>
        </div>

      </div>

    </nav>
    <router-view />
  </div>
</template>


<script>
// 页面向下滚动插件
// import VueScrollTo from 'vue-scrollto';
export default {
  props: {

  },
  data() {
    return {
      // message: 'Hello Vue.js!'  

    };
  },
  created() {
    
  },
  mounted() {
    
  },
  methods: {
   
  },
  components: {
    // 向下滚动插件
    // VueScrollTo
  },
};
</script>

<style lang="less">
html,
body {
  background-color: #ebd1b6;

  // min-width: 1200px;

  // 头部logo部分
  .appConter {
    background-color: #e7c8c8;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    padding: 0 30px;
    box-sizing: border-box;


    // 左侧盒子
    .left {
      display: flex;
      align-items: center;

      a {
        margin-right: 30px;
        color: white;
        text-decoration: none;
      }

      a:hover {
        color: blue;
      }

      .router-link-exact-active {
        color: blue;
      }

      a:nth-of-type(1) {
        margin-left: 30px;
      }

      .logo1 {
        width: 130px;
        height: 50px;
        margin-right: 30px;
      }
    }

    // 右侧图片
    .right {
      display: flex;
      flex-direction: column;
      align-items: center;


      // background-color: #00E5EE;
      .img {
        width: 40px;
        height: 40px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }

      }

      .vip {
        background-color: orange;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 3px;
      }



    }
  }

}
</style>
